<template>
    <div>
        <popup v-model="show" position="bottom" style="width:100%;">
            <div id="get_ticket" class="purchase_service" style="display: block;overflow:scroll;max-height:70vh;" >
                <div class="description_tit" ref="testPop">
                   		<span> 选择我的钱包支付</span> <!--<p style="display: inline-block;">(余额:0.00)</p>-->
                    <div class="close_page m_close_page" @touchstart="closeCover">
                        <i></i>
                        <i></i>
                        <i></i>
                    </div>
                </div>
                <ul class="coupon_list" v-if="hasMoney" style="text-align: left;">
                    <li >		<!--couponType 2为优惠券    1为折扣券 -->  <!--:class="{delMargin:coupon.couponCodeList.length > 1}"-->
                       <!--:class="[item.state ? 'yh-useable' : 'yh-disable']"-->
                       	<div class="account_money" style="line-height:0;" >
                            <!--¥
                            <span style="line-height:1.8rem;">{{‘’}}</span>  <!--item.couponAmount 优惠金额-->
                            <p style="line-height:1.8rem;">{{'钱包余额'}}</p>
                            <span style="font-size: 12px;line-height: 20px;display: block;color: red;width: 100%;overflow: hidden;white-space: nowrap;">
                                <!--可用：¥{{item.couponAmount}}-->
                            </span>    
                        </div>
                        <dl style="margin: 0 auto;text-align: center;">
                        	<p style="font-size: 1.8rem;color: red;"><span style="padding-right: 1rem;">¥{{purseData[0].availAmount}}</span></p>
                        	<!--<p>礼品卡号</p>
                        	<p>初始面额</p>
                            <p>激活时间</p>
                            <p>过期时间:{{}}</p>  <!--{{item.availableStartTime.split(" ")[0]}}-->
                        </dl>
                        <!--<em>使用</em>-->  <!--:checked="item.relIndex == activeIndex"-->
                        <input type="checkbox" class="aui-radio yh-radio"  @click.stop="choose($event)" ref="yhRadio" >
                    </li>
                </ul>
                <div v-if="!hasMoney" style="margin-top:1.5rem;width:100%;text-align:center;">暂无余额</div>
                <div class="settle_accounts lijixiadan qianbao aui-btn aui-btn-danger aui-btn-sm">
                	<!--v-if="hasMoney"   v-if="hasMoney"-->
                    <div id="close_coupon" style="font-size:1rem"  class="makeSure" @touchstart="chooseYHEvent">确 定</div>
                    <div id="close_coupon" style="font-size:1rem" v-if="!hasMoney" class="buyCard" @touchstart="toBuyCard">去充值</div>
                    <div id="close_coupon" style="font-size:1rem" v-if="hasMoney" class="buyCard" @touchstart="closeCover">取 消</div>
                    <!--<div id="close_coupon" v-if="!hasMoney" class="aui-btn aui-btn-danger  aui-btn-sm buyCard" @touchstart="toBuyCard">去购卡</div>-->
                </div>
            </div>
        </popup>
    </div>
</template>
<script>
import { Popup } from 'mint-ui';
import {mapMutations} from 'vuex';
import {Toast} from "../../../utils/toast";
import axios from "axios";
export default {
    props: {
    	getCouponMoney: {
    		type: Function,
    		default: ()=>{}
    	},
        text: {
            type: String,
            default: "使用"
        },
        used: {
            type: String,
            default: "已用"
        },
        freight: {
            type: Number,
            default: 0
        },
        couponArr: {
        	type: Array,
        	default:function(){
        		let arr = [];
        		return arr;
        	}
        },
        giftCardList:{
        	type: Array,
        	default:function(){
        		let arr = [];
        		return arr;
        	}
        },
        money: {
        	type:Number,
        	default: function(){
        		return 0
        	}
        },
        couponMoney: {
        	type:Number,
        	default: function(){
        		return 0
        	}
        }
    },
    data() {
        return {
            show: false,
            useGiftCard: false,
            hasMoney:false,
            activeIndex:-1,
            purseData:null, // 钱包数据
        }
    },
    computed: {
        
    },
    methods: {
    	...mapMutations('zx',[
    		"setTicketList","setUseGiftCard","setAvailAmount"
    	]),
    	//请求钱包的数据   ，之前是礼品卡的概念后改为钱包
    	getGiftCardData(){
    		var url = window.api.customer_host + "/purse/selectPurseInfo";
    		let config = {
    			method:"GET",
    			url:url,
    			headers:{
    				'sessionId': window.localStorage.getItem("sessionId")
    			}
    		}
    		
    		axios(config).then((res)=>{
    			if(res.data.returnCode == 1){
    				console.log(res.data.data,'请求钱包数据');
    				this.purseData = res.data.data;
//  				this.hasMoney = true;
    				this.setAvailAmount(res.data.data[0].availAmount)
    				console.log(this.purseData[0].availAmount,'钱包可用余额')
    				if(this.purseData[0].availAmount > 0){
    					this.hasMoney = true;
    				}
    			}
    			
    		})
    	},
        showCover() {
            this.show = true;
        },
        closeCover() {
            this.show = false;
        },
//      选择优惠券
        choose(even){	
        	console.log(even.target.checked,'选择使用')
//      	if(event.target.checked){
//      		if(this.totalMoney == 0){
//	        		event.target.checked = false;
//	        		Toast({
//	                        message: '优惠金额超过支付金额',
//	                        type: "fail",
//	                        duration: 1600
//	                   });
//		        }
//      	}
        },
        toBuyCard(){
        	this.$router.push('buyGiftCard');
        	this.closeCover();
        },
//      确定是否使用钱包付款
        chooseYHEvent(){
        	
        	if(this.hasMoney){
        		console.log(this.$refs.yhRadio.checked,'sas');
        		this.useGiftCard = this.$refs.yhRadio.checked;
        		this.setUseGiftCard(this.$refs.yhRadio.checked);
        	}
        	this.closeCover();
        },
//      存优惠券信息
        pushCoupon(){
        	
			
        },
    },
    components: {
        "popup": Popup
    },
    created() {
       this.hasMoney =  false;
       this.getGiftCardData();
//     console.log(this.couponArr,'自组建接受数据');
    },
    beforeDestroy(){
    		
    },
    watch: {
        show(newVal) {
//          console.log(this.show)
            if (this.show === true) {
                // console.log("显示框框"); 检查优惠券
//              this.radioChecked();
            }
        },
        couponArr(){
        	this.hasMoney =  false;
        	console.log(this.hasMoney,'自组建监控')
        }
    }

}
</script>

<style scoped="scoped">
.aui-toast {
    z-index: 9999;
}
.yh-radio {
    position: absolute;
    right: 1rem;
    top: 2rem;
}
.yh-useable {
    background: #fff  right 2.8rem !important;
}
.yh-disable {
    background: #fff right 2.8rem !important;
}
.m_close_page {
    /* padding: 0.4rem 0.6rem; */
    padding: 0;
    cursor: pointer;
    margin-left: unset; 
    margin-top: unset; 
    position: absolute;
    top: 0;
    left: unset;
    right: 1rem;
    top: 8px;
}
.description_tit {
    text-align: left;
    padding: 0 1rem;
}
.youhui{
	
	width: 10.52rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rules{
	color: #EF5423;
    border: 1px solid #EF5423;
    display: inline;
    padding: 0.1rem;
    border-radius: 0.1rem;
}
.couponArr{
	padding-top: 0.3rem;
	border: 1px solid red;
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	line-height: 0.3rem;
	text-align: center;
	margin-left: 40%;
}

.addBorder{
	border: 1px solid red;
}
.addBorder li:last-child{
	border-bottom:0px solid #eaeaea;	
}
.delMargin{
	margin-bottom: 0 !important;
	border: 0;
	border-bottom: 0.5px solid #eaeaea;
}
.makeSure{
	width: 8.125rem;
	height: 1.6rem;
	/*display: inline-block;*/
}
.buyCard{
	width: 8.125rem;
	margin-left: 0.75rem;
	height: 1.6rem;
	/*display: inline-block;*/
}
.qianbao{
	display: flex;
	flex-wrap: nowrap;
}
.coupon_list li{
	background: #FFF;
}
</style>


